<% json_data = notification.json_data %>
<div class="p-6 m:p-8 align-center w-100">
  <p class="fs-l m:fs-2xl mb-4"><%= t("views.notifications.milestone.intro") %></p>
  <h2 class="fw-normal fs-xl m:fs-2xl mb-4">
    <%= t("views.notifications.milestone.heading_html", title: link_to(h(json_data["article"]["title"]), json_data["article"]["path"], class: "crayons-link fw-bold"), type: t("views.notifications.milestone.type.#{notification.milestone_type}", count: notification.milestone_count.to_i)) %>
  </h2>

  <a href="https://giphy.com/gifs/<%= json_data["gif_id"] %>" rel="noopener noreferrer" class="block my-4" target="_blank">
    <img class="radius-default w-100 m:max-w-50 h-auto inline-block" src="https://media.giphy.com/media/<%= json_data["gif_id"] %>/giphy-downsized.gif" alt="A random celebratory gif!">
  </a>

  <a href="/dashboard" class="crayons-btn w-100 m:w-50">
    <%= t("views.notifications.milestone.check") %>
  </a>
</div>
